<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>影视信息列表</h1>
    <div>
        影视分类：
        <select id="category" name="category">
            <option value="">全部</option>
            <option value="电视剧">电视剧</option>
            <option value="电影">电影</option>
        </select>

        影视语言：
        <select id="languageId" name="languageId">
            <option value="">全部</option>
        </select>

        <input type="button" value="查询" onclick="queryVideo(1)">
        <input type="button" value="新增" onclick="add()">
    </div>

    <table border="1" id="myTable">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>主演</th>
            <th>分类</th>
            <th>语言</th>
            <th>集数</th>
            <th>操作</th>
        </tr>
    </table>
    <div id="myDiv"></div>
</body>
<script src="js/jquery.js"></script>
<script>
    $(function () {
        //查询影视作品列表 默认查询第一页
        findAll(1);
        //查询所有的语言分类
        queryLanguageCategory();
    })
    //查询影视语言分类
    function queryLanguageCategory() {
        $.getJSON("/findAllLanguageCategory",function (data) {
            $.each(data,function (index,ele) {
                let op=`<option value="${ele.id}">${ele.name}</option>`;
                $("#languageId").append(op);
            })
        })
    }
    //查询影视作品列表
    function findAll(pageIndex) {
        //清空
        $("#myTable tr:gt(0)").remove();

        //获取影视分类
        let category=$("#category").val();
        let languageId=$("#languageId").val();

        $.getJSON("/list",{'pageIndex':pageIndex,'category':category,'languageId':languageId},function (data) {
            //组装table展示数据
            $.each(data.list,function (index,ele) {
                let tr=` <tr>
                        <td>${ele.id}</td>
                        <td>${ele.title}</td>
                        <td>${ele.actors}</td>
                        <td>${ele.category}</td>
                        <td>${ele.name}</td>
                        <td>${ele.nums}</td>
                        <td>
                           <a href="#" onclick="edit(${ele.id})">编辑</a>
                           <a href="#" onclick="del(${ele.id})">删除</a>
                        </td>
                    </tr>`
                $("#myTable").append(tr);
            })
            //组装分页展示数据
            let div=` <a href="#" onclick="queryVideo(1)">首页</a>
                      <a href="#" onclick="queryVideo(${data.pageIndex-1})">上一页</a>
                      <a href="#" onclick="queryVideo(${data.pageIndex+1})">下一页</a>
                      <a href="#" onclick="queryVideo(${data.totalPage})">尾页</a>
                      第${data.pageIndex}页，共${data.totalPage}页`
            $("#myDiv").html(div);
        })
    }
    //跳转到新增页面
    function add() {
        window.location.href="add.html";
    }
    //跳转到修改页面
    function edit(id) {
        window.location.href="edit.html?id="+id;
    }
    //删除操作
    function del(id) {
        if(confirm("确定要删除吗?")){
            $.post("/delete?id="+id,function (data) {
                if(data.result==true){
                    alert("删除成功");
                    window.location.reload();
                }else{
                    alert("删除失败");
                }
            },"json")
        }
    }
</script>
</html>